<template>
  <div>
        <div
      style="line-height: 40px; font-size: 22px; font-weight: 600; padding: 5px"
    >
      简报分析
    </div>
    <el-card class="box-card">
      <el-row>
        <el-col :span="2">
          <el-input v-model="value" placeholder="请输入内容" size="mini" class="top-ipt"></el-input>
        </el-col>
        <el-col :span="2">
          <el-select v-model="value" placeholder="所有" size="mini" class="top-ipt">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="2">
          <el-select v-model="value" placeholder="月报" size="mini" class="top-ipt">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="2">
          <el-date-picker v-model="value" align="right" type="date" placeholder="发生日期" size="mini" style="width:140px;margin-left:5px;">
          </el-date-picker>
        </el-col>
        <el-col :span="4">
          <el-button type="primary" icon="el-icon-search" size="mini" style="float:right;">搜索</el-button>
        </el-col>
      </el-row>
    </el-card>

    <el-card class="box-card">
      <div class="text item">
        2021年4月(不良事件简报)
        <br/>
        1.XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
        <br/>
        2.SXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
        <br/>
        3.XXXXXXXXXXXXXXXXXXXXXXXXX
        <br/>
        <el-row>
          <el-col :span="12">
            <div id="a" :style="{width:'100%', height: '220px'}"></div>
          </el-col>
          <el-col :span="12">
            <div id="b" :style="{width:'100%', height: '220px'}"></div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-table :data="tableData" style="width:98%;margin:10px;">
              <el-table-column prop="date" label="时间" />
              <el-table-column prop="date" label="月份" />
              <el-table-column prop="name" label="合计" />
            </el-table>
          </el-col>
          <el-col :span="12">
            <div id="c" :style="{width:'100%', height: '180px'}"></div>
          </el-col>
        </el-row>
      </div>
    </el-card>
    <el-card class="box-card">
      <div class="text item">
        <div id="d" :style="{width:'100%', height: '220px'}"></div>
      </div>
    </el-card>
  </div>
</template>

<script>
let echarts = require("echarts/lib/echarts");
// 引入提示框和title组件
require("echarts/lib/component/tooltip");
require("echarts/lib/component/title");
export default {
  data() {
    return {
      value: "",
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
      ],
      options: [
        {
          value: "选项1",
          label: "黄金糕",
        },
        {
          value: "选项2",
          label: "双皮奶",
        },
        {
          value: "选项3",
          label: "蚵仔煎",
        },
        {
          value: "选项4",
          label: "龙须面",
        },
        {
          value: "选项5",
          label: "北京烤鸭",
        },
      ],
    };
  },
  mounted() {
    this.drawLine();
  },
  methods: {
    drawLine() {
      echarts.init(document.getElementById("a")).setOption({
        xAxis: {
          type: "category",
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: [120, 200, 150, 80, 70, 110, 130],
            type: "bar",
            showBackground: true,
            backgroundStyle: {
              color: "rgba(180, 180, 180, 0.2)",
            },
          },
        ],
      });
      echarts.init(document.getElementById("b")).setOption({
        dataset: [
          {
            dimensions: ["name", "age", "profession", "score", "date"],
            source: [
              [" Hannah Krause ", 41, "Engineer", 314, "2011-02-12"],
              ["Zhao Qian ", 20, "Teacher", 351, "2011-03-01"],
              [" Jasmin Krause ", 52, "Musician", 287, "2011-02-14"],
              ["Li Lei", 37, "Teacher", 219, "2011-02-18"],
              [" Karle Neumann ", 25, "Engineer", 253, "2011-04-02"],
              [" Adrian Groß", 19, "Teacher", null, "2011-01-16"],
              ["Mia Neumann", 71, "Engineer", 165, "2011-03-19"],
              [" Böhm Fuchs", 36, "Musician", 318, "2011-02-24"],
              ["Han Meimei ", 67, "Engineer", 366, "2011-03-12"],
            ],
          },
          {
            transform: {
              type: "sort",
              config: { dimension: "score", order: "desc" },
            },
          },
        ],
        xAxis: {
          type: "category",
          axisLabel: { interval: 0, rotate: 30 },
        },
        yAxis: {},
        series: {
          type: "bar",
          encode: { x: "name", y: "score" },
          datasetIndex: 1,
        },
      });
      echarts.init(document.getElementById("c")).setOption({
        xAxis: {
          max: "dataMax",
        },
        yAxis: {
          type: "category",
          data: ["A", "B", "C", "D", "E"],
          inverse: true,
          animationDuration: 300,
          animationDurationUpdate: 300,
          max: 2, // only the largest 3 bars will be displayed
        },
        series: [
          {
            realtimeSort: true,
            name: "X",
            type: "bar",
            data: [120, 200, 150, 80, 70, 110, 130],
            label: {
              show: true,
              position: "right",
              valueAnimation: true,
            },
          },
        ],
      });
      echarts.init(document.getElementById("d")).setOption({
        title: { text: "各类事件比例图" },
        tooltip: {
          trigger: "item",
        },
        legend: {
          orient: "horizontal",
        },
        series: [
          {
            name: "访问来源",
            type: "pie",
            radius: ["40%", "70%"],
            data: [
              { value: 1048, name: "搜索引擎" },
              { value: 735, name: "直接访问" },
              { value: 580, name: "邮件营销" },
              { value: 484, name: "联盟广告" },
              { value: 300, name: "视频广告" },
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      });
    },
  },
};
</script>
<style scoped>
body {
  background-color: #f8f9fa;
}
.box-card {
  margin: 5px;
}
.el-card /deep/ .el-card__header {
  padding: 10px 20px;
  background-color: #e2e2e2;
}
.top-ipt {
  margin-left: 5px;
}
.text {
  text-align: center;
}
</style>